<template>
  <com-card>
    <div slot="com_header">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input placeholder="请输入内容" v-model="formObj.query">
            <el-button
              slot="append"
              type="primary"
              icon="el-icon-search"
              @click="query"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" icon="el-icon-plus" @click="tianjia"
            >添加商品</el-button
          >
        </el-col>
      </el-row>
      <!-- 顶部步骤条 -->
      <!-- 点击添加商品时的弹窗 -->
    </div>

    <div slot="com_content">
      <el-table :data="dataObj" border>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称"></el-table-column>
        <el-table-column prop="goods_price" label="商品价格"></el-table-column>
        <el-table-column prop="goods_number" label="商品数量"></el-table-column>
        <el-table-column prop="add_time" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="warning" size="small" round icon="el-icon-edit" @click="update(row)" >编辑</el-button
            >
            <el-button
              type="danger"
              size="small"
              round
              icon="el-icon-delete"
              @click="del(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formObj.pagenum"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="formObj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 点击编辑时的弹窗 -->
      <el-dialog title="提示" :visible.sync="updateVisible" width="30%">
        <el-form :model="searchObj" label-width="80px">
          <el-form-item label="商品名称">
            <el-input v-model="searchObj.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="searchObj.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="商品数量">
            <el-input v-model="searchObj.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="商品重量">
            <el-input type="number" v-model="searchObj.goods_weight"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateVisible = false">取 消</el-button>
          <el-button type="primary" @click="upadteY">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </com-card>
</template>

<script>
import ComCard from "../../components/comCard/index.vue";
import { api_query, api_delete, api_update } from "../../api/Categories.js";

export default {
  components: {
    ComCard,
  },
  data() {
    return {
      tabPosition: "left", //
      formObj: {
        query: "",
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
      dataObj: [], //渲染数据的数组
      dialogVisible: false, //添加商品弹窗默认关闭
      updateVisible: false, //编辑的弹窗默认关闭
      searchObj: {}, //  渲染编辑的数组
    };
  },

  mounted() {
    this.query();
  },
  methods: {
    // 点击添加商品时触发的函数
    tianjia() {
      this.$router.push("/goods/comgoodsaddto");
    },

    // 点击编辑时触发的函数
    update(row) {
      this.updateVisible = true;
      let id = row.goods_id;
      let { goods_name, goods_price, goods_number, goods_weight } = row;
      this.searchObj = {
        id,
        goods_name,
        goods_price,
        goods_number,
        goods_weight,
      };
    },
    async upadteY() {
      let rst = await api_update(this.searchObj);
      let { msg, status } = rst.meta;
      this.searchObj.status = status;
      if (status == 200) {
        this.updateVisible = false;
        this.query();
      }
    },

    // 点击删除时触发的函数
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let rst = await api_delete({ id: id.goods_id });
          let { msg, status } = rst.meta;
          if (status == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.query();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 获取商品信息
    async query() {
      // data: {total: 926, pagenum: '1', goods: Array(2)
      let rst = await api_query(this.formObj); //通过api_query获取到数据，赋值给formObj，然后在赋值给rst
      console.log(rst);
      let { total, goods } = rst.data; //解构rst里面data赋值给goods\
      this.total = total;
      this.dataObj = goods; //goods在赋值给dataObj这个空数组
    },
    // 分页
    handleSizeChange(pagesize) {
      this.formObj.pagesize = pagesize;
      this.query();
    },
    handleCurrentChange(pagenum) {
      this.formObj.pagenum = pagenum;
      this.query();
    },
  },
};
</script>

<style lang="less" scoped>
</style>